<template>
	<view class="template-edit tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>

		<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}" ref="form"
			:formData="model">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-my-add" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">昵称</view>
				</view>
				<tn-input placeholder="请输入被举报人姓名" name="input" v-model="model.name" inputAlign="right"></tn-input>
			</view>
			
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-phone" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">联系方式1</view>
				</view>
				<tn-input placeholder="请输入联系方式1" name="input" v-model="model.phone" inputAlign="right"></tn-input>
			</view>
			
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-tel" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">联系方式2</view>
				</view>
				<tn-input placeholder="请输入联系方式2" name="input" v-model="model.contact"
					inputAlign="right"></tn-input>
			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-empty-page" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">遭遇损失</view>
				</view>
				<view class="justify-content-item tn-text-df tn-color-grey">
					<text class="tn-padding-xs"></text>
					<text class="tn-icon-keyboard-circle"></text>
				</view>
			</view>

			<view class="tn-margin  tn-padding">
				{{model.content}}
			</view>

			

			

		<!-- 	<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-wechat" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">vx号</view>
				</view>
				<tn-input placeholder="请输入被举报人vx号" name="input" v-model="model.wechat" inputAlign="right"></tn-input>
			</view> -->


			<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-identity" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">身份</view>
				</view>
				<tn-input placeholder="请输入被举报人身份" name="input" v-model="model.role" inputAlign="right"></tn-input>
			</view> -->


			<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-stop" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">时间</view>
				</view>
				<tn-input v-model="model.time" type="select" placeholder="请选择发生时间" :border="border"
					inputAlign="right"></tn-input>
			</view> -->
			
			<view style="margin-left: 10%;">
				<showImg ref="showImg"
					:fileList="showImg.successFileList"
					:disabled="showImg.disabled" 
					:showUploadList="showImg.showUploadList"
					:showProgress="showImg.showProgress" 
					:deleteable="showImg.deleteable"
				 />
			</view>
			
			<!-- 悬浮按钮-->
			<view class="tn-flex tn-footerfixed">
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="60%" shadow open-type="share">
						<!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
						<text class="tn-color-black">分享</text>
						<text class="tn-icon-share-circle tn-padding-left-xs tn-color-black"></text>
					</tn-button>
				</view>
			</view>


			<view class='tn-tabbar-height'></view>
		</view>
	</view>
</template>

<script>
	import request from '../common/request';
	import {
		data
	} from '../tuniao-ui/libs/mixin/mixin';
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import showImg from '@/messagePages/showImgUpload.vue'

	export default {
		name: 'TemplateEdit',
		mixins: [template_page_mixin],
		components:{showImg},
		data() {
			return {
				res: {},
				model: {
					content: '',
					name: '',
					phone: '',
					wechat: '',
					contact: '',
					role: '',
					time: '',
					imgs: ''
				},
				showImg: {
					takeFileList: [],
					successFileList:[],
					showUploadList: true,
					customBtn: false,
					autoUpload: false,
					showProgress: false,
					deleteable: false,
					customStyle: false,
					disabled: false,
				},
			}
		},
		created() {
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//#endif
		},

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.res = option.info
		},
		mounted() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.model = JSON.parse(this.res);
				console.log(this.model)
				for (let z = 0; z < this.model.imgs.length; z++) {
					let msgTemp = {};
					msgTemp.url =  this.model.imgs[z]
					this.showImg.successFileList.push(msgTemp) ;
				}
			
			}


		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/
	
	.blogger {
		&__item {
			padding: 30rpx;
		}
	
		&__author {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}
	
		&__desc {
			line-height: 55rpx;
	
			&__label {
				padding: 0 20rpx;
				margin: 0rpx 18rpx 0 0;
	
				&--prefix {
					color: #00FFC8;
					padding-right: 10rpx;
				}
			}
	
			&__content {}
		}
	
		&__content {
			margin-top: 18rpx;
			padding-right: 18rpx;
	
			&__data {
				line-height: 46rpx;
				text-align: justify;
				overflow: hidden;
				transition: all 0.25s ease-in-out;
	
			}
	
			&__status {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #82B2FF;
			}
		}
	
		&__main-image {
			border-radius: 16rpx;
	
			&--1 {
				max-width: 80%;
				max-height: 300rpx;
			}
	
			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}
	
			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}
	
		&__count-icon {
			font-size: 40rpx;
			padding-right: 5rpx;
		}
	
		&__ad {
			width: 100%;
			height: 500rpx;
			transform: translate3d(0px, 0px, 0px) !important;
	
			::v-deep .uni-swiper-slide-frame {
				transform: translate3d(0px, 0px, 0px) !important;
			}
	
			.uni-swiper-slide-frame {
				transform: translate3d(0px, 0px, 0px) !important;
			}
	
			&__item {
				position: absolute;
				width: 100%;
				height: 100%;
				transform-origin: left center;
				transform: translate3d(100%, 0px, 0px) scale(1) !important;
				transition: transform 0.25s ease-in-out;
				z-index: 1;
	
				&--0 {
					transform: translate3d(0%, 0px, 0px) scale(1) !important;
					z-index: 4;
				}
	
				&--1 {
					transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
					z-index: 3;
				}
	
				&--2 {
					transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
					z-index: 2;
				}
			}
	
			&__content {
				border-radius: 40rpx;
				width: 640rpx;
				height: 500rpx;
				overflow: hidden;
			}
	
			&__image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>